<template>
  <ych-modal
    :fullscreen="true"
    :maskClosable="false"
    :keyboard="false"
    :title="title"
    :visible.sync="dialogVisible"
    :body-style="bodyStyle"
    :destroy-on-close="true"
    :footer="null"
    @cancel="close"
    :id="id"
  >
    <div v-if="show">
      <slot />
    </div>

    <span v-if="action" slot="footer" class="dialog-footer" :element-loading-text="loadingText">
      <slot name="action">
        <a-button @click="close">{{ $t('m.common.button.cancel') }}</a-button>
        <a-button type="primary" @click="submit">{{ $t('m.common.button.ok') }}</a-button>
      </slot>
    </span>
  </ych-modal>
</template>

<script>
export default {
  props: {
    visible: Boolean,
    loadingText: {
      type: String,
      default: ''
    },
    title: {
      type: String,
      default: ''
    },
    form: {
      type: Boolean,
      default: true
    },
    action: {
      type: Boolean,
      default: true
    },
  },
  components: {},
  computed: {
    show() {
      if (this.form) {
        return this.showForm;
      } else {
        return true;
      }
    }
  },
  data() {
    return {
      loading: false,
      dialogVisible: this.visible,
      id: 'dialog_' + new Date().getTime(),
      showForm: false,
      bodyStyle: {
        backgroundColor: '#f1f2f7'
      }
    };
  },
  methods: {
    close() {
      this.dialogVisible = false;
    },
    submit() {
      this.loading = true;
      this.$emit('on-submit');
    },
    end() {
      this.loading = false;
    },
  },
  watch: {
    dialogVisible(val) {
      if (!val) {
        this.loading = false;
        this.$emit('on-close');
        setTimeout(() => {
          this.showForm = false;
        }, 300);
      } else {
        this.showForm = true;
      }
    },
    visible(val) {
      this.dialogVisible = val;
    }
  }
};
</script>
